import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Icon, Switch, Tooltip } from 'antd'
import 'styles/components/template/drag-widget-page/widget-item.scss'
/**
 * 组件类型
 */
class Widget extends React.Component{
  constructor(props) {
    super(props);
  }

  renderWidget = (widget) => {
    switch(widget.messageKey){
      case 'input':
      case 'number':
      case 'contact_bank_account':
      case 'destination':
      case 'city':
      case 'select_special_booking_person':
      case 'external_participant_name':
      case 'out_participant_num':
        return (
          <div className="widget-input">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages("common.please.enter")}</div>
          </div>
        );
      case 'text_area':
      case 'remark':
        return (
          <div className="widget-text-area">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">
              {widget.promptInfo || messages("common.please.enter")}
              <div className="widget-text-area-count">0 / {widget.messageKey === 'text_area' ? '1000' : '200'}</div>
            </div>
          </div>
        );
      case 'title':
        return (
          <div className="widget-text-area">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">
              {widget.promptInfo || messages("common.please.enter")}
              <div className="widget-text-area-count">0 / 500</div>
            </div>
          </div>
        );
      case 'prompt_key':
        return (
          <div className="widget-text-area">
            <div className="widget-content-2">
              {widget.promptInfo || messages("common.please.enter")}
            </div>
          </div>
        );
      case 'select_box':
      case 'cust_list':
      case 'more_cust_list':
      case 'currency_code':
      case 'select_cost_center':
      case 'linkage_cost_center':
      case 'select_department':
      case 'select_corporation_entity':
      case 'employee_expand':
      case 'select_company':
      case 'venMaster':
      case 'select_air_ticket_supplier':
      case 'payee':
      case 'select_approver':
        return (
          <div className="widget-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages("common.please.select")}<Icon type="right" /></div>
          </div>
        );
      case 'start_date':
      case 'end_date':
      case 'common.date':
      case 'date':
        return (
          <div className="widget-single-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages('components.key1055')/*选择日期*/}<Icon type="right" /></div>
          </div>
        );
      case 'dateTime':
        return (
          <div className="widget-single-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages('components.key1056')/*选择日期时间*/}<Icon type="right" /></div>
          </div>
        );
      case 'time':
        return (
          <div className="widget-single-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages('components.key1057')/*选择时间*/}<Icon type="right" /></div>
          </div>
        );
      case 'total_budget':
        return (
          <div className="widget-single-select">
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages('components.key1058')/*输入金额*/}</div>
          </div>
        );
      case 'attachment':
      case 'image':
        return (
          <div className="widget-attachment">
            <div className="widget-title">
              {this.getFieldName(widget)}
              {widget.fieldConstraint &&
                <div className="widget-attachment-count">{messages('components.key670',{arg1: JSON.parse(widget.fieldConstraint).maxNumber}/*最多可上传 {arg1} 张图片*/)}</div>
              }
            </div>
            <div className="widget-content">
              <div className="widget-attachment-pic">
                <Icon type="file-add" />
              </div>
            </div>
          </div>
        );
      case 'switch':
      case 'writeoff_flag':
        return (
          <div className="widget-switch">
            <div className="widget-title">{this.getFieldName(widget)}<Switch defaultChecked/></div>
          </div>
        );
      case 'select_user':
      case 'select_participant':
        return (
          <div className="widget-user">
            <div className="widget-title">
              {this.getFieldName(widget)}
              <div className="widget-user-count">{messages('components.key621'/*总人数*/)}<b>1</b></div>
            </div>
            <div className="widget-content">
              <div className="widget-user-item">
                <div className="plus-border">
                  <Icon type="plus" />
                </div>
                <div className="widget-user-add">
                  {widget.promptInfo || messages("common.add")}
                </div>
              </div>
            </div>
          </div>
        );
      case 'linkage_switch':
        let childField = widget.fieldContent ? JSON.parse(widget.fieldContent) : [];
        return (
          <div className="widget-switch">
            <div className="widget-title">{this.getFieldName(widget)}<Switch defaultChecked/></div>
            <div className="widget-content">
              {childField.map((field ,index) => {
                let holder = field.fieldType === 'TEXT' ? messages('common.please.enter') : messages('common.please.select');
                return (
                  <div key={index}>
                    <div className="field-title">{field.fieldName}</div>
                    <div className={`field-input ${index !== childField.length - 1 && 'has-border'}`}>
                      {field.promptInfo || holder}
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        );
      case 'exp_allocate':
        return (
          <div className="widget-allocate">
            <div className="widget-title">{this.getFieldName(widget)}<Icon type="right" /></div>
          </div>
        );
      case 'budget_detail':
        return (
          <div className="widget-budget">
            <div className="widget-title">
              {this.getFieldName(widget)}
              <div className="widget-budget-amount">{messages('components.key622'/*总计*/)}<b>CNY 0.00</b></div>
            </div>
            <div className="widget-content">
              <div className="plus-icon"><Icon type="plus" /></div>
              {widget.promptInfo || messages("common.add")}
            </div>
          </div>
        );
      case 'form.description':
        return (
          <div className="widget-description">
            <div className="widget-title">
              <Icon type="info-circle-o" />
              <span>{widget.title || messages('setting.key1758')/*说明文字*/}</span>
              <div>{widget.enable ? messages("common.enabled") : messages("common.disabled")}</div>
            </div>
          </div>
        );
      case 'public.assembly':
        return (
          <div className="widget-select">
            {widget.isHidden ? <div className="widget-switch">{widget.switchText ? widget.switchText : <span className={'isHiddenSwitch'}>请输入提示信息</span>}<Switch checked /></div> : ''}
            <div className="widget-title">{this.getFieldName(widget)}</div>
            <div className="widget-content">{widget.promptInfo || messages("common.please.select")}<Icon type="right" /></div>
          </div>
        );
      default:
        return this.getFieldName(widget)
    }
  };

  getFieldName = (widget) => {
    let result = widget.fieldName || widget.name;
    widget.fieldNameI18n && widget.fieldNameI18n.map(i18nDTO => {
      if(i18nDTO.language.toLowerCase() === this.props.language.code)
        result = i18nDTO.value;
    });
    let fieldTips = null
    if (widget.isTipsShow) {
      fieldTips = (
        <Tooltip overlay={widget.fieldTips || '未填写提示'}>
          <Icon type="info-circle"></Icon>
        </Tooltip>
      )
    }

    if (!fieldTips) return result;
    return (
      <span>{result}&nbsp;{fieldTips}</span>
    )
  };

  changeSwitch = (checked) => {
    // console.log('1111', checked);
    this.props.changeSwitch(checked);
  }

  render() {
    const { widget, width, className, onClick } = this.props;
    return (
      <div className={`widget-item ${className} ${widget.required ? "required" : ""}`} style={{ width }} onClick={onClick}>
        {this.renderWidget(widget)}
      </div>
    )
  }
}

Widget.propTypes = {
  onClick: React.PropTypes.func,
  widget: React.PropTypes.object,
  width: React.PropTypes.any,
  className: React.PropTypes.string,
  changeSwitch: React.PropTypes.func
};

Widget.defaultProps = {
  className: '',
  onClick: () => {},
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(Widget)
